<template>
  <div class="homeButton">
    <van-sidebar v-model="activeKey" class="box">
      <van-tabbar
        v-model="active"
        class="sss"
        active-color="#ee0a24"
        inactive-color="#000"
        @click="pathItem(active)"
      >
        <van-tabbar-item
          class="sss"
          icon="home-o"
          @click="$router.push('/home')"
          >首页</van-tabbar-item
        >
        <van-tabbar-item
          class="sss"
          icon="search"
          @click="$router.push({ path: '/category' })"
          >分类</van-tabbar-item
        >
        <van-tabbar-item class="sss" icon="friends-o" @click="gocar"
          >购物车</van-tabbar-item
        >
        <van-tabbar-item icon="setting-o" class="sss" @click="gouser"
          >我的</van-tabbar-item
        >
      </van-tabbar>
    </van-sidebar>
  </div>
</template>

<script>
import store from "@/store";

export default {
  data() {
    return {
      active: 0,
      activeKey: "",
      temp: 0,
    };
  },
  
  methods: {
    gocar() {
      if (store.getters.getisLogin) {
        this.$router.push("/car");

      } else {
        this.$router.push("/login");
      }
    },
    gouser() {
      if (store.getters.getisLogin) {
        this.$router.push("/user");
      } else {
        this.$router.push("/login");
      }
    },  
    pathItem() {
      let temp = this.$route.path
      if (temp == '/home') {
        this.active = 0
      }else if(temp == '/category'){
        this.active = 1
      }else if(temp == '/car'){
        this.active = 2
      }else{
        this.active = 3
      }
    },
  },
  created() {
    this.pathItem()
  },
};
</script>

<style lang="scss" scoped>
// .homeButton{
//   width: 100%;
//   .box{
//     width: 100%;
//   }
// }
</style>